<div class="row">
    <div class="col-lg-12">
        <div class="card card-outline-info">
            <div class="card-header">
                <h4 class="m-b-0 text-white">用户管理</h4>
            </div>
            <mat-tab-group (selectedTabChange)="showChart($event)">
                <mat-tab label="Material Table">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-12">
                                <op-search-bar (searchData)="getSearchData($event)"></op-search-bar>
                                <br>
                                <op-material-table [inputData]="users" [userName]="userName"></op-material-table>
                            </div>
                        </div>
                    </div>
                </mat-tab>
                <mat-tab label="Panel&Echarts">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-6">
                                <op-panel #nationalityPanelComponent [panelOption]="nationalityPanel">
                                    <op-chart #nationalityComponent [options]="nationality" chartHeight="300px"></op-chart>
                                </op-panel>
                            </div>
                            <div class="col-lg-6">
                                <op-panel #statusPanelComponent [panelOption]="statusPanel">
                                    <op-chart #statusComponent [options]="status" chartHeight="300px"></op-chart>
                                </op-panel>
                            </div>
                        </div>
                        <br>
                        <div class="row">
                            <div class="col-lg-12">
                                <op-panel #treePanelComponent [panelOption]="treePanel">
                                    <op-chart #treeComponent [options]="tree" chartHeight="300px"></op-chart>
                                </op-panel>
                            </div>
                        </div>
                    </div>
                </mat-tab>
            </mat-tab-group>
        </div>
    </div>
</div>